<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="/main/css/layout.css" rel="stylesheet" type="text/css" />
    <link href="/main/css/jquery.jscrollpane.lozenge.css" rel="stylesheet" type="text/css" />
    <link href="/main/css/jquery.jscrollpane.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .pic img{
            width: 55px;
            height: 55px;
        }
        #m1{
            width: 100%;
            height: 1000px;
        }
        #msg_board{
            padding-top: 50px;
            margin-left: 50px;
            width: 1500px;
            margin: 0 auto;
        }
        #title{
            width: 100%;
            height: 50px;
            line-height: 50px;
        }
        #title span{
            font-size: 35px;
            display:block;
            text-align:center;
        }
        #message{
            margin: 0 auto;
            width: 1200px;
            height: 520px;
            border-right: 20px;

        }
        #game{
            width: 80%;
            height: 100%;
            float: left;
            background-color: #9f9f9f;
        }
        #m_m{
            padding-top: 25px;
            width: 800px;
            height: 400px;
            margin-left: 50px;
            float: left;
        }
        #table{
            border-collapse: collapse;
            margin: 0 auto;
        }
        #table td{
            width: 40px;
            height: 40px;
            border: 1px black solid;
            margin: 0;
            padding: 0;
            cursor: pointer;
            background-size:100% 100%;
            text-align: center;
            font-size: 15px;
            line-height: 15px;
            animation:cs 1s cubic-bezier(0.5,0.5,0.5,0.5) infinite;
        }
        @keyframes cs{
            50% {
                color: #ffffff;
            }
            100% {
                color: #000000;
            }
        }
        #rank{
            width: 20%;
            height: 100%;
            float: left;
            background-color: #01aaed;
        }
        #btn_r{
            margin-top: 80%;
            margin-left: 30%;
        }
        #reset{
            width: 80px;
            height: 65px;
        }
    </style>
</head>

<body>
<!--背景-->
<div class="background"><img src="/main/img/bg1.jpg" alt="加载中" /><div class="logo"></div></div>
<!--主内容开始-->
<div id="container">
    <div id="head">
        <a href="#" class="arrange" id="arrange"></a>
        <div class="h-right">
            <a href="main.html" class="home"></a>
            <img src="/main/img/line.png" width="2" height="50" alt="" />
            <a href="#" class="cloud" id="cloud">
                <div class="same">云同步</div>
            </a>
            <img src="/main/img/line.png" width="2" height="50" alt="" />
            <a href="#" class="bell"><span class="tip">3</span></a>
            <img src="/main/img/line.png" width="2" height="50" alt="" />
            <div class="user">
                <div class="pho"><img id="img" src="/userimg/undefined.jpg" width="52" height="50" alt="" /></div>
                <span id="name">[[*{session.user.user_name}]]
          <div class="user-info" id="twodm">
            <div class="jtt"></div>
            <div class="menu">
              <div class="first">
                <a href="#">个人信息</a>
              </div>
              <div class="second">
                <a href="#">通知<em>3</em></a>
              </div>
              <a href="gologout" class="quit" >退出</a>
            </div>
          </div>
        </span>
            </div>
            <img src="/main/img/line.png" width="2" height="50" alt="" />
            <a href="#" class="notice" id="notice"></a>
        </div>
    </div>
    <!--侧边栏-右-->
    <div class="side-bar" id="side-bar">
        <div class="side-bar-in">
            <ul class="tab">
                <li class="title vtitle">
                    <a href="#" class="lianxi"></a>
                </li>
                <li class="title">
                    <a href="#" class="heart"></a>
                </li>
                <li class="title">
                    <a href="#" class="setting"></a>
                </li>
                <div class="vcon vcon1" id="vcon" style="display:block;" >
                    <ul>
                        <li class="xuanz" th:each="user,userStat:${application.userlist}">
                            <div class="pic"><img th:src="${user.user_img_path}+${user.user_img_name}"></div>
                            <span>
                <h4 th:text="${user.user_name}"></h4>
                <p th:text="${user.user_status}"></p>
              </span>
                            <a href="#" class="v-big"></a>
                    </ul>
                </div>
                <div class="vcon">2</div>
                <div class="vcon">
                    <div class="block">
                        <span>背景颜色选择</span>
                        <a href="#" class="dot" id="blue"><img src="/main/img/blue_dot.png" width="14" height="14" alt="" /></a>
                        <a href="#" class="dot" id="pink"><img src="/main/img/pink_dot.png" width="14" height="14" alt="" /></a>
                        <a href="#" class="dot" id="green"><img src="/main/img/green_dot.png" width="14" height="14" alt="" /></a>
                    </div>
                </div>
            </ul>
        </div>
    </div>
    <!--左侧栏begin-->
    <div class="left-bar" id="left-bar">
        <ul>
            <!--      <li><a href="#" class="synergy">医技协同<em>医技协同</em></a></li>-->
            <!--      <li><a href="#" class="movie">影像诊断<em>影像诊断</em></a></li>-->
            <!--      <li><a href="#" class="computer">预约协同<em>预约协同</em></a></li>-->
            <!--      <li><a href="#" class="drug">预交金管理<em>预交金管理</em></a></li>-->
            <!--      <li><a href="#" class="results">个人绩效<em>个人绩效</em></a></li>-->
        </ul>
    </div>
    <!--左侧栏end-->
    <!--模块-->
    <div id="main">
        <div class="left-side">
            <div class="main_visual">
                <a href="javascript:;" id="btn_prev"></a>
                <a href="javascript:;" id="btn_next"></a>
                <div>
                    <ul>
                        <li>
                            <div id="m1">
                                <div id="msg_board">
                                    <div id="title">
                                        <span>扫雷</span>
                                    </div>
                                    <div id="message">
                                        <div id="game">
                                            <div id="m_m">
                                                <table id="table">
                                                    <tr th:each="leis,leisStat:${application.leilist}">
                                                        <td th:each="lei,leiStat:${leis}" th:value="${lei.value}" th:type="${lei.type}"
                                                            th:x="${leiStat.index}" th:y="${leisStat.index}"></td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                        <div id="rank">
                                            <div id="btn_r">
                                                <button id="reset" onclick="reset()">重新开始</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--主内容结束-->
<style>
    .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
</body>

<script src="/main/js/jquery-1.7.1.min.js" language="javascript" type="text/javascript"></script>
<script src="/main/js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="/main/js/jquery.jscrollpane.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/main/js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="/main/js/jquery.touchSlider.js"></script>
<script type="text/javascript" src="/main/js/jquery.nicescroll.js"></script>
<script src="/main/js/slide.js" language="javascript" type="text/javascript"></script>

<script th:inline="javascript">
    function setImg(){
        var imgObjPreview=document.getElementById("img");
        imgObjPreview.src = [[*{session.user.user_img_path}]] + [[*{session.user.user_img_name}]] ;
    }
</script>
<script type="text/javascript">
    var cl = false;

    $(function() {
        init();
    })
    function init() {
        setImg();
        setTdOnClick();
        getShaoleiTable();
    }
    function setTdOnClick(){
        $('#table tr td').each(function (){
            this.onclick = function() {
                var t = $(this).attr("type");
                if(cl){
                    alert("有人踩雷 请重启游戏");
                }
                if(t=="1"){
                    var x = $(this).attr("x");
                    var y = $(this).attr("y");
                    clickAndGetShaoleiTable(x,y);
                }
            }
        });
    }

    function clickAndGetShaoleiTable(x,y){
        $.ajax({
            type:"post",//请求类型
            url:"clickShaolei",//请求地址
            dataType:"json",//交互的数据类型
            data:{
                "x":x,
                "y":y
            },
            cache:false,//去除请求的缓存
            success:function(){
                getShaoleiTable();
            }
        });
    }
    function getShaoleiTable(){
        $.ajax({
            type:"post",//请求类型
            url:"getShaoleiTable",//请求地址
            dataType:"text",//交互的数据类型
            cache:false,//去除请求的缓存
            success:function(msg){
                var result = $.parseJSON(msg);
                var leilist = result.leilist;
                $('#table tr td').each(function (){
                    var x = $(this).attr("x");
                    var y = $(this).attr("y");
                    $(this).attr("value",leilist[y][x].value);
                    $(this).attr("type",leilist[y][x].type);
                    var v = $(this).attr("value");
                    var t = $(this).attr("type");
                    if(t=="0"){
                        if(v=="0"){
                            $(this).css("background-image","url("+leilist[y][x].img+")");
                        }else if(v=="-1"){
                            this.style.backgroundColor='#000000';
                            cl = true
                        }else{
                            $(this).css("background-image","url("+leilist[y][x].img+")");
                            $(this).text(v);
                        }
                    }else{
                        $(this).attr('style','background-image:none');
                        $(this).text("");
                    }
                });
            }
        });
    }
    function reset() {
        $.ajax({
            type:"post",//请求类型
            url:"reset",//请求地址
            cache:false,//去除请求的缓存
            success:function(){
                cl = false;
                getShaoleiTable();
            }
        });
    }
</script>
<script language="JavaScript">
    setInterval(function(){getShaoleiTable();},1000);
    //指定1秒刷新一次
</script>
</html>
